// 封装获取一级分类数据的逻辑
import { getTopCategoryAPI } from '@/apis/category';
import { onMounted, reactive } from 'vue';
import { onBeforeRouteUpdate,useRoute } from 'vue-router';

export function useCategory(){
  const route = useRoute()
  // const topCategory = ref({})
  // const getTopCategory = async () => {
  //   const res = await getTopCategoryAPI(route.params.id)
  //   topCategory.value = res.result
  // }
  const topCategory = reactive({})
  const getTopCategory = async (id = route.params.id) => {
    const res = await getTopCategoryAPI(id)
    // topCategory = res.result
    // 因为reactive定义的响应式数据不能直接赋值，否则会失去响应式
    Object.assign(topCategory, res.result)
    // console.log(topCategory)
  }
  onMounted(() => getTopCategory())

  // 路由缓存问题解决方案二：
  // 路由参数变化的时候，可以把分类数据接口重新发送
  // beforeRouteUpdate钩子函数可以在每次路由更新之前执行
  onBeforeRouteUpdate((to) => {
    // 使用最新的路由参数请求最新的分类数据
    getTopCategory(to.params.id)
  })

  return topCategory
}